<template>
	<view class="Business">
		<!-- 昨日 -->
		<view class="tabs">
			<view :class="{ actived: dateTime == 1 }" @tap="dateTime = 1">昨日</view>
			<view :class="{ actived: dateTime == 2 }" @tap="dateTime = 2">近7日</view>
			<view :class="{ actived: dateTime == 3 }" @tap="dateTime = 3">近30日</view>
			<view :class="{ actived: dateTime == 4 }" @tap="dateTime = 4">自定义</view>
		</view>

		<!-- 营业收入分析 -->
		<view class="Today">
			<!-- 1 -->
			<view class="new">
				<view>
					<view>
						<view>营业收入分析</view>
						<view><image src="../static/management/yiwen.png" mode=""></image></view>
					</view>
					<view class="Tuesday">
						<!-- 1 -->
						<view class="income_one">
							<view>曝光人数</view>
							<view>0.00</view>
							<view>与上周二持平</view>
						</view>
						<!-- 2 -->
						<view class="income_two">
							<view>进店转化率</view>
							<view>0.00</view>
							<view>
								<image src="../static/management/shang.png" mode=""></image>
								<text>100.0%</text>
							</view>
						</view>
						<!-- 3 -->
						<view class="income_six">
							<view>下单转化率</view>
							<view>0.00</view>
							<view>
								<image src="../static/management/xia.png" mode=""></image>
								<text>100.0%</text>
							</view>
						</view>
					</view>

					<!-- 营业额与支出明细 -->
					<view class="details" @tap="Expend">
						<view>营业额与支出明细</view>
						<view><image src="../static/home/jiantouq.png" mode=""></image></view>
					</view>
				</view>
			</view>

			<!-- 2 -->
			<view class="new">
				<view>
					<view>
						<view>有效订单情况</view>
						<view><image src="../static/management/yiwen.png" mode=""></image></view>
					</view>
					<view class="Tuesday">
						<!-- 1 -->
						<view class="income_one">
							<view>有效订单</view>
							<view>0.00</view>
							<view>与上周二持平</view>
						</view>
						<!-- 2 -->
						<view class="income_two">
							<view>客单价</view>
							<view>0.00</view>
							<view>
								<image src="../static/management/shang.png" mode=""></image>
								<text>100.0%</text>
							</view>
						</view>
						<!-- 3 -->
						<view class="income_six">
							<view>顾客实付</view>
							<view>0.00</view>
							<view>
								<image src="../static/management/xia.png" mode=""></image>
								<text>100.0%</text>
							</view>
						</view>
					</view>

					<!-- 有效订单时间段明细 -->
					<view class="details" @tap="valid">
						<view>有效订单时间段明细</view>
						<view><image src="../static/home/jiantouq.png" mode=""></image></view>
					</view>
				</view>
			</view>
			
			<!-- 3 -->
			<view class="new">
				<view>
					<view>
						<view>无效订单损失</view>
						<view><image src="../static/management/yiwen.png" mode=""></image></view>
					</view>
					<view class="Tuesday">
						<!-- 1 -->
						<view class="income_one">
							<view>无效订单</view>
							<view>0.00</view>
							<view>与上周二持平</view>
						</view>
						<!-- 2 -->
						<view class="income_two">
							<view>预计产生损失</view>
							<view>0.00</view>
							<view>
								<image src="../static/management/shang.png" mode=""></image>
								<text>100.0%</text>
							</view>
						</view>
					
					</view>
			
					<!-- 无效订单原因 -->
					<view class="details" @tap="order">
						<view>无效订单原因</view>
						<view><image src="../static/home/jiantouq.png" mode=""></image></view>
					</view>
				</view>
			</view>
		</view>
		<!-- 支出明细弹出层 -->
		<u-popup v-model="Expenditure" mode="bottom" height="68%">
			<view class="istrue">
				<view class="Turnover"><view>营业额与支出明细</view></view>
				<!-- 营业额明细 -->
				<view class="detail"><view>营业额明细</view></view>

				<!-- 收支类型 -->
				<view class="Income">
					<view>收入类型</view>
					<view>金额</view>
					<view>占比</view>
				</view>
				<view class="sales">
					<view>商品销售</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>餐盒收入</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>配送收入</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>赠品补贴</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales" style="border: none;">
					<view>其他收入</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>

				<!-- 支出明细 -->
				<!-- 支出明细 -->
				<view class="detail"><view>支出明细</view></view>

				<!-- 收支类型 -->
				<view class="Income">
					<view>支出类型</view>
					<view>金额</view>
					<view>占比</view>
				</view>
				<view class="sales">
					<view>活动补贴</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>优惠券补贴</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>配送补贴</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>平台服务费</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>智能满减补贴</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>只能满减服务费</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>基础物流费</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
				<view class="sales">
					<view>其他补贴</view>
					<view>0.00</view>
					<view>0.00%</view>
				</view>
			</view>
		</u-popup>

		<!-- 有效订单时间段明细 -->
		<u-popup v-model="Period" mode="bottom">
			<view class="istrue">
				<view class="Turnover"><view>有效订单时间段明细</view></view>
				<!-- 有效订单时间段明细 -->
				<view class="detail"><view>有效订单时间段明细</view></view>
				<!-- 时间段 -->
				<view class="Income">
					<view>时间段</view>
					<view>有效订单</view>
					<view>占比</view>
				</view>
				<!-- 时间 -->
				<view class="Period_details">
					 <view>
						 <view>早餐</view>
						 <view>05:00~10:00</view>
					 </view>
					 <!-- 2 -->
					 <view>0</view>
					 <view>0.00</view>
				</view>
				<view class="Period_details">
					 <view>
						 <view>午餐</view>
						 <view>10:00~14:00</view>
					 </view>
					 <!-- 2 -->
					 <view>0</view>
					 <view>0.00</view>
				</view>
				<view class="Period_details">
					 <view>
						 <view>下午茶</view>
						 <view>14:00~17:00</view>
					 </view>
					 <!-- 2 -->
					 <view>0</view>
					 <view>0.00</view>
				</view>
				<view class="Period_details">
					 <view>
						 <view>晚餐</view>
						 <view>17:00~20:00</view>
					 </view>
					 <!-- 2 -->
					 <view>0</view>
					 <view>0.00</view>
				</view>
				<view class="Period_details">
					 <view>
						 <view>夜宵</view>
						 <view>20:00~05:00</view>
					 </view>
					 <!-- 2 -->
					 <view>0</view>
					 <view>0.00</view>
				</view>
			</view>
		</u-popup>
	
	    <!-- 无效订单 -->
		<u-popup v-model="orders" mode="bottom">
			
				<view class="orderList">无效订单原因</view>
			
		    <view class="reason">
				<view class="reason_one">商家原因（8单）</view>
				<view class="reason_two">
					<view>具体原因</view>
					<view>订单量</view>
				</view>
				<view class="timeout">
					<view>备餐超时</view>
					<view style="color: #666666;">4</view>
				</view>
				<view class="timeout bordrr">
					<view>商品售罄</view>
					<view>4</view>
				</view>
				<view class="reason_one">非商家原因（0单）</view>
				<view class="reason_two">
					<view>具体原因</view>
					<view>订单量</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
export default {
	data() {
		return {
			dateTime: 1,
			Expenditure: false,
			Period: false ,//有效订单时间段明细弹出层
			orders:false
		};
	},
	methods: {
		Expend() {
			this.Expenditure = true;
		},
		// 有效订单时间段明细弹出层
		valid() {
			this.Period = true;
		},
		// 无效订单
		order(){
			this.orders = true
		}
	}
};
</script>
<style lang="scss" scoped>
.Business {
	overflow-y: auto;
	background: #ffffff;
	height: 80vh;
	// 近7日
	.tabs {
		display: flex;
		align-items: center;
		justify-content: center;

		padding: 24upx 0upx;
		& > view:nth-child(1) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid #dddddd;
			border-radius: 33upx 0upx 0upx 33upx;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& > view:nth-child(2) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid rgba(221, 221, 221, 1);
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& > view:nth-child(3) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid rgba(221, 221, 221, 1);
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		& > view:nth-child(4) {
			width: 164upx;
			height: 66upx;
			border: 2upx solid #dddddd;
			border-radius: 0upx 33upx 33upx 0upx;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.actived {
			background: $bg12-background !important;
			border: 2upx solid $bg-background !important;
		}
	}
	.Today {
		.new {
			border-top: 20upx solid #f1f1f1;
			// border-bottom: 20upx solid #F1F1F1;
			& > view:nth-child(1) {
				padding: 32upx 50upx;
				& > view:nth-child(1) {
					display: flex;
					align-items: center;

					& > view:nth-child(1) {
						font-size: 36upx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: rgba(53, 57, 76, 1);
					}
					& > view:nth-child(2) {
						image {
							width: 21upx;
							height: 21upx;
							margin-left: 17upx;
						}
					}
				}
				// 2
				// 收支
				.Tuesday {
					display: flex;
					align-items: center;
					justify-content: space-between;
					flex-wrap: wrap;
					margin-top: 39upx;
					padding-bottom: 32upx;
					// 1
					.income_one {
						width: 30%;
						& > view:nth-child(1) {
							font-size: 28upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: $bg6-color;
						}
						& > view:nth-child(2) {
							font-size: 36upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: $bg2-color;
						}
						& > view:nth-child(3) {
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: $bg5-color;
						}
					}
					// 2
					.income_two {
						width: 30%;
						& > view:nth-child(1) {
							font-size: 28upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: $bg6-color;
						}
						& > view:nth-child(2) {
							font-size: 36upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: $bg2-color;
						}
						& > view:nth-child(3) {
							display: flex;
							align-items: center;
							image {
								width: 21upx;
								height: 21upx;
								display: flex;
							}
							& > text {
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #59a973;
							}
						}
					}
					// 3
					.income_six {
						width: 30%;
						& > view:nth-child(1) {
							font-size: 28upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: $bg6-color;
						}
						& > view:nth-child(2) {
							font-size: 36upx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: $bg2-color;
						}
						& > view:nth-child(3) {
							display: flex;
							align-items: center;
							image {
								width: 21upx;
								height: 21upx;
								display: flex;
							}
							& > text {
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #59a973;
							}
						}
					}
				}
				// 2
				.details {
					display: flex;
					align-items: center;
					justify-content: space-between;
					& > view:nth-child(1) {
						font-size: 26upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: $bg6-color;
					}
					& > view:nth-child(2) {
						image {
							width: 30upx;
							height: 32upx;
							display: flex;
						}
					}
				}
			}
		}
	}
	.istrue {
		// 支出明细弹出
		.Turnover {
			border-bottom: 1upx solid #edeff9;
			padding-bottom: 32upx;
			& > view:nth-child(1) {
				font-size: 36upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg2-color;
				text-align: center;
				margin-top: 32upx;
			}
		}
		.detail {
			padding: 0 50upx;
			margin-top: 30upx;
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg2-color;
			}
		}
		.Income {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 36upx 217upx 36upx 0upx;
			border-bottom: 1upx solid #edeff9;
			width: 87%;
			margin: 0 auto;
			& > view {
				font-size: 26upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg5-color;
				text-align: left;
			}
		}
		.sales {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 31upx 217upx 31upx 0upx;
			border-bottom: 1upx solid #edeff9;
			width: 87%;
			margin: 0 auto;
			& > view:nth-child(1) {
				font-size: 26upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg2-color;
				text-align: left;
				flex: 3;
			}
			& > view:nth-child(2) {
				font-size: 26upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg3-color;
				text-align: left;
				flex: 2;
			}
			& > view:nth-child(3) {
				font-size: 26upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg3-color;
				text-align: left;
				flex: 1;
			}
		}
	    .Period_details{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 31upx 217upx 31upx 0upx;
			border-bottom: 1upx solid #edeff9;
			width: 87%;
			margin: 0 auto;
			&>view:nth-child(1){
				flex: 3;
				& > view:nth-child(1) {
					font-size: 26upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: $bg2-color;
					text-align: left;
					
				}
				& > view:nth-child(2) {
					font-size: 26upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: $bg3-color;
					text-align: left;
				}
			}
			&>view:nth-child(2){
				font-size: 26upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg3-color;
				text-align: left;
				flex: 2;
			}
			&>view:nth-child(3){
				font-size: 26upx; 
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: $bg3-color;
				text-align: left;
				
			}
		}
	}

    // 无效订单
	.orderList{		
		font-size: 36upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		text-align: center;
		padding: 32upx 0upx 32upx 0upx;
		border-bottom: 1upx solid #EDF0FA;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;
	}
	.reason{
		width: 93%;
		margin: 140upx auto;
		.reason_one{
			
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
		}
		.reason_two{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 37upx 143upx 37upx 0upx;
			border-bottom: 1upx solid #EDF0FA;
			
			font-size: 26upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #999999;
		}
		.timeout{			
			font-size: 26upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 37upx 143upx 37upx 0upx;
			border-bottom: 1upx solid #EDF0FA;
		}
	}
}
</style>
